import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { getUserInfoAPI } from '@/api'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 1-用来存储登陆成功之后得到的token
    token: '', // 保存token字符串
    userInfo: {} // 保存用户信息（id, username, nickname, email, user_pic）
  },
  getters: {
    // username(state) {
    //   return state.userInfo.username
    // }
    // 定义三个计算属性
    nickname: state => state.userInfo.nickname, // 昵称
    username: state => state.userInfo.username, // 用户名
    user_pic: state => state.userInfo.user_pic // 用户头像
  },
  mutations: {
    // 2-保存token
    updateToken(state, val) {
      state.token = val
    },
    // 保存用户信息
    updateUserInfo(state, val) {
      state.userInfo = val
    }
  },
  actions: {
    // 请求用户的信息
    async getUserInfoActions(store) {
      const res = await getUserInfoAPI()
      // this.$store是为了拿到store对象，但是这里第一个形参就是store对象，直接用
      store.commit('updateUserInfo', res.data.data)
    }
  },
  modules: {
  },
  // 配置为 vuex 的插件
  plugins: [createPersistedState()] // 只要调用这个函数就相当于注入持久化插件

})
// vuex默认保存在内存中 所以刷新所有的值会回归初始化（无法做到持久存储）
// 借助vuex-persistedstate@3.2.1插件让vuex做持久化存储
// 退出登录 重新登陆 只走相关组件代码（异步DOM切换，不会导致所有代码重新执行，app.vue不会走）
// 效果不对：换个账号得重新请求用户数据
// 解决：1-可以在登录页面，登录成功后，再发请求去拿到用户信息
// 2-可以在全局前置路由守卫中，写（路由跳转得时候，判断+跳转）
